<template>
	<view class="order-pay">
		<view class="order-item">订单编号: {{orderId}}</view>
		<view class="order-item">订单金额: {{totalPrice | priceFilter}}</view>
		<view class="pay-main">
			<view class="pay-title">选择支付方式</view>
			<radio-group @change="changeClick">
				<label v-for="(item, index) in payList" :key="item.value">
					<view class="items">
						<view class="lefts">
							<view class="imgs">
								<image :src="item.icons" mode=""></image>
							</view>
							<view class="title">{{item.name}}</view>
						</view>
						<radio :value="item.value" :checked="index === current" />
					</view>
				</label>
			</radio-group>
			<!-- <view class="items">
				<view class="lefts">
					<view class="imgs">
						<image src="/static/icons/alipay.png" mode=""></image>
					</view>
					<view class="title">支付宝支付</view>
				</view>
				<view class="rights">
					<radio-group @change="changeClick">
						<label class="radio">
							<radio value="r2" :checked="isChecked" /></label>
					</radio-group>
				</view>
			</view> -->
			<!-- <view class="items">
				<view class="lefts">
					<view class="imgs">
						<image src="/static/icons/wxpay.png" mode=""></image>
					</view>
					<view class="title">微信支付</view>
				</view>
				<view class="rights">
					<label class="radio">
						<radio value="r2" :checked="isChecked" /></label>
				</view>
			</view> -->
		</view>
		<view class="order-bottom">
			<!-- #ifdef H5 -->
						<view class="pay" @tap="buyClicks">立即支付</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
						<view class="pay" @tap="buyClick">立即支付</view>
			<!-- #endif -->

			<view class="desc">点击立即支付, 即代表您同意 
			<text>条款协议</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapGetters} from 'vuex';
	import {getPayConfim} from '@/network/cart/index.js'
	export default {
		data() {
			return {
				payType: 'alipay',
				payList: [{
						value: 'alipay',
						name: '支付宝支付',
						checked: false,
						icons: '/static/icons/alipay.png'
					},
					{
						value: 'wxpay',
						name: '微信支付2',
						checked: true,
						icons: '/static/icons/wxpay.png'
					}
				],
				orderId: '',
				totalPrice: '',
				current: 0
			};
		},
		computed: {
			// ...mapGetters(['totalPrice']),
			// ...mapState(['orderId'])  // 改用路由传过来 避免刷新数据丢失
		},
		onLoad(e) {
			console.log(e);
			this.orderId = e.orderId;
			this.totalPrice = e.price
		},
		methods: {
			changeClick(e) {
				console.log(e)
				this.payType = e.detail.value;
			},
			async buyClick() {
				const datas = {
					userId: uni.getStorageSync('tokens').id,
					// orderId: this.$store.state.orderId,
					orderId: this.orderId,
					payType: this.payType			
				}
				const res = await getPayConfim(datas)
				console.log(res, '支付成功')
				if (res.data.code == 'S') {
					uni.redirectTo({
						url: '/pages/product/paysuccess/paysuccess?price=' + this.totalPrice
					})
				}		
			},
			async buyClicks() {
				const datas = {
					userId: uni.getStorageSync('tokens').id,
					// orderId: this.$store.state.orderId,
					orderId: this.orderId,
					payType: this.payType			
				}
				const res = await getPayConfim(datas)
				console.log(res, '支付成功')
				if (res.data.code == 'S') {
					uni.navigateTo({
						url: '/pages/product/paysuccess/paysuccess?price=' + this.totalPrice
					})
				}		
			}
		},
		filters: {
			priceFilter(val) {
				return '¥' + (val / 100).toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-pay {
		height: 100vh;
		background-color: #F1ECE7;
		padding: 30rpx;

		.order-item {
			padding: 12rpx 0;
		}
		.order-bottom {
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.desc {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #A49999;
				text {
					color: #5A9EF6;
				}
			}
			.pay {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 70%;
				height: 80rpx;
				color: #fff;
				border-radius: 40rpx;
				background-color: #354E44;
			}
		}
		.pay-main {
			margin-top: 40rpx;

			.pay-title {
				margin-bottom: 10rpx;
			}

			.items {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 30rpx 0;

				.lefts {
					display: flex;
					align-items: center;

					.imgs {
						width: 80rpx;
						height: 80rpx;
						margin-right: 40rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.rights {
					width: 20rpx;
					height: 20rpx;
					background-color: pink;
					border-radius: 50%;
				}
			}
		}
	}
</style>
